<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>默认登录界面</title>
    <link href="./static/css/common.css" rel="stylesheet" type="text/css" />
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="./static/js/userListManager.js"></script>
    <script src="./static/js/request.js"></script>
    <style>
        /* 非公共区域 */
        .dialog .child{
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        .dialog .child-account-title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid #eee;
        }
        .dialog .child-account-title p{
            font-size: 16px;
            flex-grow: 1;
        }
        .child-account-add{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .child-account-add .dialog{
            margin: auto;
            
        }
        .other-login{
            position: sticky;
            bottom: 0px;
            left: 24px;
        }
        .history-login-wrap{
            margin-top: 15px;
            background-color: #fff;
            overflow: hidden;
            overflow-y: auto;
            height: 200;
        }
    </style>
</head>

<body>
    <script>

        var result = {
                token: '',
                uid: '',
                username: ''
            };
        var childrenAccountList = []
        
        function handleLoginSuccess(data){
            JSBridge.getSDKListener().onLoginJsonStrResult(0, JSON.stringify(data))
            JSBridge.close();
        }
        function childLogin(uid){
            console.log("子账号登录", uid)
            result.uid = uid
            console.log("存储token是否成功检查:", JSBridge.getToken())
            handleLoginSuccess(result)
        }
        function showChildAccountDialog(){
            console.log("显示小号添加弹窗")
            $("#nickname").val("")
            $(".child-account-add").show()
            $(".child-account-add").on("click", function(e){
                if(e.target.className == "child-account-add"){
                    $(".child-account-add").hide()
                }
            })

        }
        function addChildAccount(){
            console.log("添加小号")
            request.getInstance().get("/v1.platform_child_account_add",{
                nickname: $("#nickname").val()
            }, function(res) {
                console.log(JSON.stringify(res), "添加小号成功")
                $(".child-account-add").hide()
                $(".child-login-list").append('\n<div class="child">' + '<span>'+ res.data.nickname +'</span>'  + '<a href="#" onclick="childLogin('+ res.data.uid +')">进入</a>' + '</div>')
            })
        }
        function login() {
            // 是否勾选用户协议
            if (!document.getElementById("agreement").checked) {
                JSBridge.showToast("请勾选用户协议")
                return
            }
            loginByUserNameAndPassword($("#username").val(), $("#password").val())
        }
        function loginByUserNameAndPassword(username, password) {
            JSBridge.setToken("");
            request.getInstance().get("/v1.platform_login", {
                username,
                password
            }, function(res) {
                result.token = res.data.token;
                JSBridge.setToken(result.token)
                childrenAccountList = res.data.children;
                // 弹出子账号选择
                result.username = res.data.username
                userListManager.saveUser(username, password);
                console.log("大号登录成功", JSON.stringify(res.data))
                $('.login-dialog').hide();
                var childHtml = '<h2>子账号选择</h2>'
                var childHtml = childHtml + `
                <div class="child-account-title">
                    <p>小号列表</p><button onclick="showChildAccountDialog()">添加小号</button>
                </div>                
                `
                childrenAccountList.map(item=>{
                    childHtml = childHtml + '\n<div class="child">' + '<span>'+ item.nickname +'</span>'  + '<a href="#" onclick="childLogin('+ item.uid +')">进入</a>' + '</div>'
                })
                $('.child-login-list').html(childHtml);
                $('.child-login-list').show()
            })
        }
        function onKeyGanerateUserName(){
            var randomABC = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
            var randomNum = "0123456789";
            var randomStr = "";
            for (var i = 0; i < 6; i++) {
                var index = Math.floor(Math.random() * 52);
                randomStr += randomABC.charAt(index);
            }
            for (var i = 0; i < 3; i++) {
                var index = Math.floor(Math.random() * 10);
                randomStr += randomNum.charAt(index);
            }
            $("#registerUsername").val(randomStr)
        }
        function registerAndLogin() {
            // 是否勾选用户协议
            if (!document.getElementById("registerAgreement").checked) {
                JSBridge.showToast("请勾选用户协议aa")
                return
            }
            var username = $("#registerUsername").val()
            var password = $("#registerPassword").val()
            request.getInstance().get("/v1.platform_register", {
                username: username,
                password: password
            }, function(res) {
                console.log("注册成功", JSON.stringify(res.data))
                $('.login-register-dialog').hide();
                loginByUserNameAndPassword(username, password)
            })
        }
        function showRegisterDialog() {
            $('.login-dialog').hide();
            $('#registerUsername').val("")
            $('#registerPassword').val("");
            $('.login-register-dialog').show();
        }

        function showLoginDialog(){
            $('.child-login-list').hide();
            $('.login-register-dialog').hide();
            $('#username').val("");
            $('#password').val("");
            $('.login-dialog').show();
        }
        function showPhoneNumberRegister(){
            // 使用手机号注册
        }
    </script>
    <div class="dialog login-dialog">
        <h2>AhaoSdk</h2>
        <div>
            <div class="line">
                <input type="text" id="username" placeholder="请输入用户名" />
                <label class="input-label" for="username">用户名</label>
            </div>
            <br />
            <div class="line">
                <input type="password" id="password" placeholder="请输入密码" />
                <label class="input-label" for="password">密码</label>
            </div>
            <div style="text-align: right;padding-top: 12px;padding-right: 18px;">
                没有账号？<a href="javascript:void(0);" onclick="showRegisterDialog()">前往注册</a>
            </div>
            <div style="text-align: center;width: 100%;margin-top: 16px;">
                <button class="submit" onclick="login()">登录</button>
            </div>
            <!-- 用户协议勾选框 -->
            <div style="display: flex;text-align: center;width: 100%;align-items: center;padding: 12px;">
                <input type="checkbox" id="agreement" style="display: inline-block;width: 16px;height: 16px;" />
                <label for="agreement" style="width: 100%;">登录即同意
                    <a href="https://www.baidu.com" target="_blank">《用户协议》</a>
                    和<a href="https://www.baidu.com" target="_blank">《隐私协议》</a></label>
            </div>
        </div>
    </div>

    <div class="dialog login-register-dialog" style="display: none;">
        <h2>账号注册</h2>
        <div>
            <div class="line">
                <input type="text" id="registerUsername" placeholder="请输入用户名" />
                <label class="input-label" for="registerUsername">用户名</label>
                <a href="javascript:void(0);" onclick="onKeyGanerateUserName()">一键生成用户名</a>
            </div>
            <br />
            <div class="line">
                <input type="password" id="registerPassword" placeholder="请输入密码" />
                <label class="input-label" for="registerPassword">密码</label>
            </div>
            <div style="text-align: right;padding-top: 12px;padding-right: 18px;">
                使用<a href="javascript:void(0);" onclick="showPhoneNumberRegister()">手机号注册</a>或者已有账号？<a href="javascript:void(0);" onclick="showLoginDialog()">前往登录</a>
            </div>
            <div style="text-align: center;width: 100%;margin-top: 16px;">
                <button class="submit" onclick="registerAndLogin()">注册并登录</button>
            </div>
            <!-- 用户协议勾选框 -->
            <div style="display: flex;text-align: center;width: 100%;align-items: center;padding: 12px;">
                <input type="checkbox" id="registerAgreement" style="display: inline-block;width: 16px;height: 16px;" />
                <label for="registerAgreement" style="width: 100%;">登录即同意
                    <a href="https://www.baidu.com" target="_blank">《用户协议》</a>
                    和<a href="https://www.baidu.com" target="_blank">《隐私协议》</a></label>
            </div>
        </div>
    </div>


    <div class="dialog child-login-list" style="position: relative;;display: none;">
    </div>

    <div class="child-account-add" style="display: none;">
        <div class="dialog">
            <h2>添加小号</h2>
            <div class="line">
                <input type="text" id="nickname" placeholder="请输入小号名称" />
                <label class="input-label" for="nickname">小号名称</label>
            </div>
            <div style="text-align: center;width: 100%;margin: 16px 0;">
                <button class="submit" onclick="addChildAccount()">添加</button>
            </div>
        </div>
    </div>
    <script>
        function copyPassowrd(text){
            console.log("复制密码", text)
            var input = document.createElement('input');
            input.setAttribute('readonly', 'readonly');
            input.setAttribute('value', text);
            document.body.appendChild(input);
            input.setSelectionRange(0, 9999);
            input.select();
            if (document.execCommand('copy')) {
                document.execCommand('copy');
                JSBridge.showToast('复制成功');
            }
            document.body.removeChild(input);
        };
        (function(){
            // 这个是历史登录的账号密码
            var historyLoginUserDict = userListManager.getUserList();
            if(historyLoginUserDict){
                $('.child-login-list').html("");
                console.log("历史账号登录记录", 1111, JSON.stringify(historyLoginUserDict))
                $('.login-dialog').hide();
                var html = ''
                for(var key in historyLoginUserDict){
                    html = html + '\n<div class="child">' + '<span>账号：'+ key +'</span>'  + '<a href="#" onclick="copyPassowrd(\''+ historyLoginUserDict[key] +'\')" style="margin-right: 24px">复制密码</a>'  +'<a href="#" onclick="loginByUserNameAndPassword(\''+ key +'\',\''+ historyLoginUserDict[key] +'\')">进入</a>' + '</div>'
                }
                html = '<h2>历史登录账号</h2>\n<div class="history-login-wrap">' + html + '</div>'
                html = html + '\n<div class="other-login">' + '<span></span>'  + '<a href="#" onclick="showLoginDialog()">其他账号登录</a>' + '</div>'
                $('.child-login-list').html(html);
                $('.child-login-list').show()
            } else {
                $('.login-dialog').show();
            }
        })();
    </script>
</body>

</html>